<template>
	<view class="wallet">
		<view class="banner">
			<view class="titleLogo">
				<image src="../../static/img/uc_login_58x58_@2x.png" mode=""></image>
			</view>
			<button >已实名认证</button>
			<view class="bill">
				<view class="bill_left">
					<view class="">账户余额（元）</view>
					<view class="">10000.00</view>
				</view>
				<view class="bill_right">
					<view class="">待还金额（元）</view>
					<view class="">0.00</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="recharge" @click="recharge">充值</view>
			<view class="cash" @click="cash">立即提现</view>
		</view>
		<view class="mainCard" v-if="current==0">
			<input type="number" value="" placeholder="请输入充值金额     元"/>
			<view class="recharge">立即充值</view>
			<view class="cash">取消</view>
		</view>
		<view class="getCash" v-else="current==1">
			<input type="number" value="" placeholder="请输入提现金额     元"/>
			<input type="number" value="" placeholder="请输入提现密码"/>
			<view class="recharge">提现</view>
			<view class="cash">取消</view>
		</view>
		<view class="safe">
			<image src="../../static/img/uc_login_58x58_@2x.png" mode=""></image>
			账户资金安全由银行保障
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
			current:0	
			}
		},
		methods:{
			// 充值
			recharge(){
				this.current=0
			},
			// 提现
			cash(){
				this.current=1
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color:#f8f8f8;
	}
	.banner{
		width: 100%;
		height: 528rpx;
		background: url(../../static/img/bill_top_bg_375x245_@2x.png)no-repeat center;
		text-align: center;
		.titleLogo{
			padding-top: 108rpx;
			image{
				width: 164rpx;
				height: 164rpx;
			}
		}
		button{
			width: 228rpx;
			height: 58rpx;
			line-height: 58rpx;
			background-color: rgba(000,000,000,0);
			font-size: 32rpx;
			color: #fff;
			text-align: center;
			border-radius: 46rpx;
			border: 2rpx solid #fff;
			margin-top: 54rpx;
			margin-bottom: 62rpx;
		}
		.bill{
			width: 652rpx;
			height: 208rpx;
			background-color: #fff;
			margin: 0 auto;
			padding: 18rpx;
			display: flex;
			.bill_left{
				flex: 1;
				padding-left: 38rpx;
				border-right: 2rpx solid #DEDEDE;
				color: #666;
				font-size: 28rpx;
				text-align: left;
				view:nth-child(1){
					margin-top: 32rpx;
					margin-bottom: 20rpx;
				}
				view:nth-child(2){
					color: #FF6200;
					font-size: 40rpx;
				}
			}
			.bill_right{
				flex: 1;
				padding-left: 34rpx;
				color: #666;
				font-size: 28rpx;
				text-align: left;
				view:nth-child(1){
					margin-top: 32rpx;
					margin-bottom: 20rpx;
				}
				view:nth-child(2){
					color: #FF6200;
					font-size: 40rpx;
				}
			}
		}
	}
	.main{
		margin-top: 200rpx;
		padding-left: 94rpx;
		padding-right: 84rpx;
		.recharge,
		.cash{
			display: inline-block;
			width: 236rpx;
			height: 110rpx;
			line-height: 110rpx;
			background-color: #eb686d;
			color: #fff;
			text-align: center;
			border-radius: 60rpx;
			font-size: 40rpx;
			// background: url(../../static/img/btn_submit_113x40_@2x.png) no-repeat center;
		}
		.cash{
			margin-left: 86rpx;
			background-color: #fe8559;
		}
	}
	.mainCard{
		margin:30rpx auto 0;
		width: 658rpx;
		height: 326rpx;
		background-color: #fff;
		text-align: center;
		padding-top: 44rpx;
		box-sizing: border-box;
		input{
			width: 572rpx;
			height: 96rpx;
			border: 2rpx solid #ccc;
			outline: none;
			border-radius: 60rpx;
			margin: 0 auto 44rpx;
		}
		.recharge,
		.cash{
			display: inline-block;
			width: 236rpx;
			height: 110rpx;
			line-height: 110rpx;
			background-color: #eb686d;
			color: #fff;
			text-align: center;
			border-radius: 60rpx;
			font-size: 40rpx;
			// background: url(../../static/img/btn_submit_113x40_@2x.png) no-repeat center;
		}
		.cash{
			margin-left: 86rpx;
			background-color: #fff;
			color: #666666;
			border: 2rpx solid #f0979c;
		}
	}
	.getCash{
		width: 658rpx;
		height: 472rpx;
		background-color: #fff;
		margin:30rpx auto 0;
		padding-top: 44rpx;
		box-sizing: border-box;
		text-align: center;
		input{
			width: 572rpx;
			height: 96rpx;
			border: 2rpx solid #ccc;
			outline: none;
			border-radius: 60rpx;
			margin: 0 auto 44rpx;
		}
		.recharge,
		.cash{
			display: inline-block;
			width: 236rpx;
			height: 110rpx;
			line-height: 110rpx;
			background-color: #eb686d;
			color: #fff;
			text-align: center;
			border-radius: 60rpx;
			font-size: 40rpx;
			// background: url(../../static/img/btn_submit_113x40_@2x.png) no-repeat center;
		}
		.cash{
			margin-left: 86rpx;
			background-color: #fff;
			color: #666666;
			border: 2rpx solid #f0979c;
		}
	}
	.safe{
		margin: 100rpx auto 50rpx;
		image{
			width: 66rpx;
			height: 68rpx;
			margin-left: 174rpx;
			margin-right: 12rpx;
			vertical-align: middle;
		}
		font-size: 32rpx;
		color: #848484;
	}
</style>
